<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>test12</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
	<!-- <link rel="stylesheet" href="css/pGis.css" media="all"> -->
	<link rel="stylesheet" href="css/map.css" media="all">
	<link rel="stylesheet" href="/public/res/skin/dark/darkBlue.css" type="text/css">
	<link rel="stylesheet" href="css/rangeSlider.css" media="all">
	<link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css" id="styleSrc" />
</head>

<body data-background-color="dark">
	<div class="content">
		<div class="layui-row layui-col-space1 par-box menuClose" id="pgis_app">
			<div class="left_box">
				<div class="gridbox">
					<div class="layui-col-md1 toolbar">
						<div class="case_grid">
							<ul>
								<li>
									<a href="javascript:;" zkmap-event="caseGrid">
										<i class="zkuasgm-icon">&#xe9bd;</i>
										<p>选择网格</p>
									</a>
								</li>
								<li>
									<a href="">
										<i class="zkuasgm-icon">&#xe606;</i>
										<p>区域筛选</p>
										<div class="more">1</div>
									</a>
									<div class="smenu">
										<a href="####">
											<p><i class="zkuasgm-icon">&#xe636;</i></p>
											<p>线路两旁</p>
										</a>
										<a href="####">
											<p><i class="zkuasgm-icon">&#xe623;</i></p>
											<p>地点周边</p>
										</a>
										<a href="####">
											<p><i class="zkuasgm-icon">&#xe85b;</i></p>
											<p>任意区域</p>
										</a>
									</div>
								</li>
								<li>
									<a href="">
										<i class="zkuasgm-icon">&#xe604;</i>
										<p>选择业务</p>
										<div class="num"><span class="layui-badge">5</span></div>
										<div class="more">1</div>
									</a>
									<div class="smenu">
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路两旁线路两旁</p>
										</a>
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路</p>
										</a>
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路两旁线路两旁线路两旁线路两旁线路两旁线路两旁</p>
										</a>
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路两旁线路</p>
										</a>
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路两旁</p>
										</a>
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路两旁两旁</p>
										</a>
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路</p>
										</a>
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路两</p>
										</a>
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路两旁</p>
										</a>
										<a href="####" zkmap-event="caseBusiness">
											<p class="hIcon"><i class="zkuasgm-icon"></i></p>
											<p>线路两旁线路两</p>
										</a>
										
										
									</div>
								</li>
							</ul>
						</div>
						<div class="tag_list_bk">
							<div class="tag_list_left">
								<ul>
									<li zkmap-event="rygj" id="rygj"><i class="zkuasgm-icon">&#xe614;</i>
										<!-- <span class="close" zkmap-event="clearSearch"><i class="zkuasgm-icon">&#xe629;</i></span> -->
										<p>人员轨迹</p>
										<p class="num_line"><span class="layui-badge">345</span></p>
									</li>
									<li zkmap-event="tsrq" id="tsrq"><i class="zkuasgm-icon">&#xe61a;</i>
										<p>特殊人员</p>
										<p class="num_line"><span class="layui-badge">61728</span></p>
									</li>
									<li zkmap-event="sst" id="sst"><i class="zkuasgm-icon">&#xe65d;</i>
										<p>摄像头</p>
										<p class="num_line"><span class="layui-badge">8784</span></p>
									</li>
									<li zkmap-event="rygj" id="rygj"><i class="zkuasgm-icon">&#xe614;</i>
										<!-- <span class="close" zkmap-event="clearSearch"><i class="zkuasgm-icon">&#xe629;</i></span> -->
										<p>人员轨迹</p>
										<p class="num_line"><span class="layui-badge">345</span></p>
									</li>
									<li zkmap-event="tsrq" id="tsrq"><i class="zkuasgm-icon">&#xe61a;</i>
										<p>特殊人员</p>
										<p class="num_line"><span class="layui-badge">61728</span></p>
									</li>
									<li zkmap-event="rygj" id="rygj"><i class="zkuasgm-icon">&#xe614;</i>
										<!-- <span class="close" zkmap-event="clearSearch"><i class="zkuasgm-icon">&#xe629;</i></span> -->
										<p>人员轨迹</p>
										<p class="num_line"><span class="layui-badge">345</span></p>
									</li>
									<li zkmap-event="tsrq" id="tsrq"><i class="zkuasgm-icon">&#xe61a;</i>
										<p>特殊人员</p>
										<p class="num_line"><span class="layui-badge">61728</span></p>
									</li>
									<li zkmap-event="sst" id="sst"><i class="zkuasgm-icon">&#xe65d;</i>
										<p>摄像头</p>
										<p class="num_line"><span class="layui-badge">8784</span></p>
									</li>
									<li zkmap-event="rygj" id="rygj"><i class="zkuasgm-icon">&#xe614;</i>
										<!-- <span class="close" zkmap-event="clearSearch"><i class="zkuasgm-icon">&#xe629;</i></span> -->
										<p>人员轨迹</p>
										<p class="num_line"><span class="layui-badge">345</span></p>
									</li>
									<li zkmap-event="tsrq" id="tsrq"><i class="zkuasgm-icon">&#xe61a;</i>
										<p>特殊人员</p>
										<p class="num_line"><span class="layui-badge">61728</span></p>
									</li>

								</ul>
							</div>

						</div>

					</div>
					<div class="layui-col-md2 toolsBox">
						<div class="flex overflow height100" id="common">

						</div>
					</div>
				</div>

			</div>
			<!-- leftbox -->

			<div class="layui-col-md9 r-box" id="move-right">
				<div class="layui-row grid-demo">
					<div>
						<span><i class="zkuasgm-icon toggleMenu" zkmap-event="toggleLeft">&#xe9bf;</i></span>
					</div>
					<div class="layui-col-md12 r-title">
						<div class="layui-row layui-col-space5 countboxs">
							<div>
								<ul>
									<li><i class="zkuasgm-icon">&#xe6c1;</i><span class="text">当日结办</span><i
											class="number">45345</i></li>
									<li><i class="zkuasgm-icon">&#xe63f;</i><span class="text">累计事件</span><i
											class="number">56734</i></li>
									<li><i class="zkuasgm-icon">&#xe8ff;</i><span class="text">实有房屋</span><i
											class="number">12123</i></li>
									<li><i class="zkuasgm-icon">&#xe640;</i><span class="text">当日采集</span><i
											class="number">7686</i></li>
									<li><i class="zkuasgm-icon">&#xe604;</i><span class="text">累计排查</span><i
											class="number">123123</i>
									</li>
								</ul>
							</div>

						</div>

						<!-- <div class="txBox tx-fast layui-anim-fadein layui-anim-loop">
							<i class="zkuasgm-icon">&#xe6f9;</i>
						</div> -->
						<div class="msgIconBox"></div>
						<div class="txDiv">
							<!-- 头部区域 -->
							<ul class="layui-nav">
								<li class="layui-nav-item" lay-unselect>
									<a href="javascript:;">
										<cite class=" tx-fast layui-anim-fadein layui-anim-loop"><i
												class="zkuasgm-icon">&#xe6f9;</i></cite>
									</a>
									<dl class="layui-nav-child">
										<dd><a href="####"><i class="zkuasgm-icon">&#xe6f9;</i>基本资料基本资料<span
													class="layui-badge">99</span></a></dd>
										<dd><a href="####"><i class="zkuasgm-icon">&#xe6f9;</i>修改密码<span
													class="layui-badge">99</span></a>
										</dd>
									</dl>
								</li>
							</ul>
						</div>
						<!-- <li class="layui-nav-item txtest" lay-unselect>
							<a href="javascript:;">
								<cite>贤心</cite>
							</a>
							<dl class="layui-nav-child">
								<dd><a lay-href="set/user/info.html">基本资料</a></dd>
								<dd><a lay-href="set/user/password.html">修改密码</a></dd>
								<hr>
								<dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
							</dl>
						</li> -->

					</div>

				</div>
				<div class="floatBoxBtn mClose">
					<a href="####" zkmap-event="closefloatBoxBtn"><i class="zkuasgm-icon">&#xe662;</i></a>
				</div>
				<div class="floatBox">
					<span class="close" zkmap-event="closeFloatBox"><i class="zkuasgm-icon">&#xe629;</i></span>


					<div class="search_tag_box">
						<div class="tit"><i class="zkuasgm-icon">&#xe662;</i>图层</div>
					</div>
					<div class="map-layer">
						<ul id="layerBtnItem" class="animate">
							<li><a href="####" zkmap-event="rygj"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe685;</i></span><span class="text">人员轨迹</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li><a href="####" zkmap-event="gcqy"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe7af;</i></span><span class="text">工厂企业</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li><a href="####" zkmap-event="syqk"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe7f8;</i></span><span class="text">税源情况</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li><a href="####" zkmap-event="ssfx"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe604;</i></span><span class="text">税收分析</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li><a href="####" zkmap-event="gsrrq"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe7e6;</i></span><span class="text">高收入人群</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li><a href="####" zkmap-event="hwry"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe61a;</i></span><span class="text">环卫人员</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li><a href="####" zkmap-event="tsrq"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe61a;</i></span><span class="text">特殊人群</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li><a href="####" zkmap-event="sst"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe65d;</i></span><span class="text">摄像头</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li zkmap-event="ljt"><a href="####"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe69f;</i></span><span class="text">垃圾桶</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li><a href="####" zkmap-event="loading"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe696;</i></span><span
										class="icon_around bg_around_darkblue layui-anim layui-anim-rotate layui-anim-loop"><i
											class="zkuasgm-icon">&#xe685;</i></span><span class="text">出租房1</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li class="loading" id="testAdd"><a href="####"><span
										class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe696;</i></span><span
										class="icon_around bg_around_darkblue layui-anim layui-anim-rotate layui-anim-loop"><i
											class="zkuasgm-icon">&#xe685;</i></span><span class="text">出租房租房</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li class="act" id="testPop"><a href="####"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe64c;</i></span><span
										class="text">重点青少年重点青少年</span><span class="yes"><i
											class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li class="act"><a href=""><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe604;</i></span><span class="text">当日事件</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<li><a href="####" zkmap-event="loading"><span class="icon_around bg_around_darkblue"><i
											class="zkuasgm-icon">&#xe696;</i></span><span
										class="icon_around bg_around_darkblue layui-anim layui-anim-rotate layui-anim-loop"><i
											class="zkuasgm-icon">&#xe685;</i></span><span class="text">出租房1</span><span
										class="yes"><i class="zkuasgm-icon">&#xe808;</i></span></a></li>
							<!-- <li><a href="####" zkmap-event="none"><span class="icon_around bg_around0"><i class="zkuasgm-icon">&#xe601;</i></span><span class="text">没结果</span></a></li>
							<li><a href="####" zkmap-event="loading"><span class="icon_around bg_around0"><i class="zkuasgm-icon">&#xe601;</i></span><span class="text">加载</span></a></li>

							<li><a href="####" zkmap-event="rygj"><span class="icon_around bg_around_orange"><i class="zkuasgm-icon">&#xe614;</i></span><span class="text">人员轨迹</span></a></li>
							<li><a href="####" zkmap-event="tsrq"><span class="icon_around bg_around_yellow"><i class="zkuasgm-icon">&#xe61a;</i></span><span class="text">特殊人群</span></a></li>
							<li><a href="####" zkmap-event="sst"><span class="icon_around bg_around_darkblue"><i class="zkuasgm-icon">&#xe65d;</i></span><span class="text">摄像头</span></a></li> -->


						</ul>
						<!-- <div class="layerBtnMore" zkmap-event="toggleLayerBtn" title="展开更多图层"><i
								class="zkuasgm-icon">&#xe633;</i>
						</div> -->

					</div>
					<!-- 图层 -->

					<div class="search_tag_box">
						<div class="tit"><i class="zkuasgm-icon">&#xe60c;</i>高级搜索</div>
					</div>
					<form class="layui-form" action="">
						<div class="search-bar" id="sear2">
							<div class="layui-inline">
								<div zkmap-event="caseOption">
									<select lay-filter="selType">
										<option value="1">业务</option>
										<option value="2">门牌号</option>
										<option value="3">兴趣点</option>
									</select>
								</div>
							</div>
							<div class="layui-inline">
								<input id="search_ip1" type="text" name="title" lay-verify="title" autocomplete="off"
									placeholder="请选择业务" class="layui-input">
								<input id="search_ip2" type="text" name="title" lay-verify="title" autocomplete="off"
									placeholder="请输入门牌号" class="layui-input" style="display:none">
								<input id="search_ip3" type="text" name="title" lay-verify="title" autocomplete="off"
									placeholder="请输入兴趣点" class="layui-input" style="display:none">
							</div>
							<div class="layui-inline">
								<button class="layui-btn layui-btn-normal">搜索</button>
							</div>
						</div>
					</form>
					<!-- 高级搜索 -->
					<!-- <div class="search_tag_box">
						<div class="tit"><i class="zkuasgm-icon">&#xe60c;</i>行业聚集度对比分析</div>
					</div>
					<form class="layui-form" action="">
						<div class="search-bar" id="sear2">
							<div class="layui-inline">
								关键字
							</div>
							<div class="layui-inline">
								<input id="search_ip1" type="text" name="title" lay-verify="title" autocomplete="off"
									placeholder="请输入企业名称" class="layui-input">
							</div>
							<div class="layui-inline">
								<button class="layui-btn layui-btn-normal">搜索</button>
							</div>
						</div>
					</form> -->
					<!-- 高级搜索 -->
					<!-- 经济税收发展趋势对比分析 -->
					<!-- <div class="search_tag_box">
						<div class="tit"><i class="zkuasgm-icon">&#xe60c;</i>经济税收发展趋势对比分析</div>
					</div>
					<div class="ssdbBox">
						<form class="layui-form" action="">
							<ul>
								<li>
									<dl>
										<dt>周期</dt>
										<dd>
											<span><input type="radio" name="zq" value="年度" title="年度"></span>
											<span><input type="radio" name="zq" value="季度" title="季度" checked></span>
											<span><input type="radio" name="zq" value="月度" title="月度"></span>

										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>时间段</dt>
										<dd>
											<input type="text" class="layui-input" id="date1">
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>业务</dt>
										<dd>
											<span><input type="checkbox" name="" title="写作" lay-skin="primary"
													checked></span>
											<span><input type="checkbox" name="" title="发呆" lay-skin="primary"></span>
											<span><input type="checkbox" name="" title="禁用" lay-skin="primary"></span>
											<span><input type="checkbox" name="" title="发呆" lay-skin="primary"></span>
											<span><input type="checkbox" name="" title="禁用" lay-skin="primary"></span>
											<span><input type="checkbox" name="" title="发呆" lay-skin="primary"></span>
											<span><input type="checkbox" name="" title="禁用" lay-skin="primary"></span>
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>统计属性</dt>
										<dd>
											<span><input type="radio" name="tjsx" title="销售额" lay-skin="primary"
													checked></span>
											<span><input type="radio" name="tjsx" title="营业成本"></span>
											<span><input type="radio" name="tjsx" title="营业利润"></span>
											<span><input type="radio" name="tjsx" title="税收额"></span>
											<span><input type="radio" name="tjsx" title="其他"></span>
											<span><input type="radio" name="tjsx" title="其他"></span>
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>显示类型</dt>
										<dd>
											<span><input type="radio" name="xslx" title="热力图"></span>
											<span><input type="radio" name="xslx" title="麻点图"></span>
										</dd>
									</dl>
								</li>
								<li class="btnLine">

									<button class="layui-btn layui-btn-normal">查询</button>
								</li>
							</ul>
						</form>
					</div> -->

					<!-- 经济税收发展趋势对比分析 -->
				</div>
				<!-- 浮动搜索框 -->
				<div class="rangeBox">
					<span class="close"><i class="zkuasgm-icon">&#xe629;</i></span>
					<ul>
						<li>
							<dl>
								<dt>数据时间轴1</dt>
								<dd><input type="text" id="demo_1" /></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt>地图时间轴</dt>
								<dd><input type="text" id="demo_2" /></dd>
							</dl>
						</li>

					</ul>
				</div>

				<div id="allmap"></div>

				<!-- 地图 -->


			</div>

			<div class="floatTools">
				<input id="toggle2" class="ip" type="checkbox" checked>
				<label for="toggle2" class="tit">工具</label>
				<ul class="animate">
					<li>
						<a href="####" id="addPoint" class="hov">
							<p><i class="zkuasgm-icon">&#xe611;</i></p>
							<p>定位</p>
						</a>
						<div class="smenu">
							<div class="selCity">
								<div class="fixSelList"></div>
								<form class="layui-form" action="">
									<div class="layui-inline">
										<div class="layui-form-select">
											<select lay-filter="selCity" style="width:80px;">
												<option value="1">桂林</option>
												<option value="2">贺州</option>
												<option value="3">小榄</option>
											</select>
										</div>
									</div>
									<div class="layui-inline">
										<input type="text" name="title" placeholder="请输入关键字" class="layui-input">
									</div>
									<div class="layui-inline">
										<button class="layui-btn layui-btn-normal">搜索</button>
									</div>
								</form>

								<div class="selList">
									<ul>
										<li><a href="####"><span><i class="zkuasgm-icon">&#xe61c;</i></span>银行</a></li>
										<li><a href="####"><span><i class="zkuasgm-icon">&#xe61c;</i></span>银行</a></li>
										<li><a href="####"><span><i class="zkuasgm-icon">&#xe61c;</i></span>银行</a></li>
									</ul>
								</div>

							</div>
						</div>
					</li>
					<li>
						<a href="####" id="addPoint2">
							<p><i class="zkuasgm-icon">&#xe607;</i></p>
							<p>测量</p>
						</a>
					</li>

					<li>
						<a href="####" id="addPoint3">
							<p><i class="zkuasgm-icon">&#xe620;</i></p>
							<p>底图</p>
							<div class="more">1</div>
						</a>
						<div class="smenu">
							<a href="####">
								<p><i class="zkuasgm-icon">&#xe884;</i></p>
								<p>二维地图</p>
							</a>
							<a href="####">
								<p><i class="zkuasgm-icon">&#xe647;</i></p>
								<p>三维地图</p>
							</a>
							<a href="####">
								<p><i class="zkuasgm-icon">&#xe6d1;</i></p>
								<p>正射影像</p>
							</a>
						</div>
					</li>
					<li>
						<a href="####" zkmap-event="tips">
							<p><i class="zkuasgm-icon">&#xe662;</i></p>
							<p>样式</p>
							<div class="more">1</div>
						</a>
						<div class="smenu">
							<a href="####">
								<p><i class="zkuasgm-icon">&#xe9bd;</i></p>
								<p>网格</p>
							</a>
							<a href="####">
								<p><i class="zkuasgm-icon">&#xe811;</i></p>
								<p>网路</p>
							</a>
						</div>
					</li>
					<li>
						<a href="####">
							<p><i class="zkuasgm-icon">&#xe63d;</i></p>
							<p>其他</p>
						</a>
					</li>
					<li>
						<a href="####" zkmap-event="qyfxList">
							<p><i class="zkuasgm-icon">&#xe63d;</i></p>
							<p>区域分析</p>
						</a>
					</li>
					<li>
						<a href="####">
							<p><i class="zkuasgm-icon">&#xe612;</i></p>
							<p>清除</p>
						</a>
					</li>
				</ul>
			</div>
			<!-- 浮动工具栏 -->

			<div class="fullScreenBtn">
				<p><i class="zkuasgm-icon">&#xe64f;</i></p>
			</div>
			<!-- 全屏按钮 -->

			<div class="floatTips">那艘巨轮活像一幢浮动的大楼。</div>

			<!-- 消息提示框 -->


		</div>
	</div>
	</div>
	<!-- <div id="openResult"></div> -->



</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ESXpb9G3PmhTyyiwPLelxkx47i8Mi50w"></script>
<script type="text/javascript" src="../../layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
	map.addControl(new BMap.NavigationControl({ offset: new BMap.Size(-10, 110), anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_LARGE }));
	var iconList = [
		'&#xe6d6;',
		'&#xe6d5;',
		'&#xe6d4;',
		'&#xe6d0;',
		'&#xe6ce;',
		'&#xe6cc;',
		'&#xe6cb;',
		'&#xe6ca;',
		'&#xe6c9;',
		'&#xe6c8;',
		'&#xe6c6;',
		'&#xe6b8;',
		'&#xe6bd;',
		'&#xea54;',
		'&#xe6c7;',
		'&#xe678;',
		'&#xe63b;',
		'&#xe6ab;',
		'&#xe6c4;'
	]
	var bgColorList = [
		'#f00',
		'#34495e',
		'#1abc9c',
		'#3498db',
		'#f1c40f',
		'#8e44ad',
		'#C0392B',
		'#2ecc71'
	]
	// 编写自定义函数,创建标注

	function addMarker(point) {
		//创建自定义标签

		var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(18, 18));
		var marker2 = new BMap.Marker(point, { icon: myIcon });  // 创建标注
		map.addOverlay(marker2);              // 将标注添加到地图中
		var icon = iconList[Math.floor((Math.random() * iconList.length))]
		var bgColor = bgColorList[Math.floor((Math.random() * bgColorList.length))]
		var label = new BMap.Label(`
			<div class="customPoint">
				<p class="bgIcon"><i class="zkuasgm-icon" style="color:${bgColor}">&#xe6d7;</i></p>
				<p class="icon"><i class="zkuasgm-icon">${icon}</i></p>
			</div>
		`, { offset: new BMap.Size(-7, -3) });
		label.setStyle({ color: "red", fontSize: "22px", border: 0, background: "none" })
		marker2.setTitle("业务属性")
		marker2.setLabel(label);
		marker2.addEventListener("mouseover", function () {
			this.setZIndex(2000)
		});

	}
	function addMarker2(point) {
		//创建自定义标签

		var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(18, 18));
		var marker2 = new BMap.Marker(point, { icon: myIcon });  // 创建标注
		map.addOverlay(marker2);              // 将标注添加到地图中
		var icon = iconList[Math.floor((Math.random() * iconList.length))]
		var bgColor = '#3498db'
		var label = new BMap.Label(`
			<div class="customPoint">
				<p class="bgIcon"><i class="zkuasgm-icon" style="color:${bgColor}">&#xe6d7;</i></p>
				<p class="icon"><i class="zkuasgm-icon">${icon}</i></p>
			</div>
		`, { offset: new BMap.Size(-7, -3) });
		label.setStyle({ color: "red", fontSize: "22px", border: 0, background: "none" })
		marker2.setTitle("业务属性")
		marker2.setLabel(label);
	}

	function addMarker3(point) {
		//创建自定义标签

		var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(18, 18));
		var marker2 = new BMap.Marker(point, { icon: myIcon });  // 创建标注
		map.addOverlay(marker2);              // 将标注添加到地图中
		var icon = iconList[Math.floor((Math.random() * iconList.length))]
		var bgColor = bgColorList[Math.floor((Math.random() * bgColorList.length))]
		var label = new BMap.Label(`
			<div class="polyPoint">
				<p class="icon"><i class="zkuasgm-icon">${icon}</i></p>
				<p class="name">重点青少年</p>
				<p class="count">15464个</p>
			</div>
		`, { offset: new BMap.Size(-7, -3) });
		label.setStyle({ color: "red", fontSize: "22px", border: 0, background: "none" })
		marker2.setTitle("业务属性")
		marker2.setLabel(label);
		marker2.addEventListener("mouseover", function () {
			this.setZIndex(2000)
		});

	}


	$('#addPoint').on("click", function () {
		var bounds = map.getBounds();
		var sw = bounds.getSouthWest();
		var ne = bounds.getNorthEast();
		var lngSpan = Math.abs(sw.lng - ne.lng);
		var latSpan = Math.abs(ne.lat - sw.lat);
		for (var i = 0; i < 50; i++) {
			var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
			addMarker(point);
		}
	})
	$('#addPoint2').on("click", function () {
		var bounds = map.getBounds();
		var sw = bounds.getSouthWest();
		var ne = bounds.getNorthEast();
		var lngSpan = Math.abs(sw.lng - ne.lng);
		var latSpan = Math.abs(ne.lat - sw.lat);
		for (var i = 0; i < 50; i++) {
			var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
			addMarker2(point);
		}
	})
	$('#addPoint3').on("click", function () {
		var bounds = map.getBounds();
		var sw = bounds.getSouthWest();
		var ne = bounds.getNorthEast();
		var lngSpan = Math.abs(sw.lng - ne.lng);
		var latSpan = Math.abs(ne.lat - sw.lat);
		for (var i = 0; i < 50; i++) {
			var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
			addMarker3(point);
		}
	})
	// addMarker2(point);



</script>

</html>